<template>
  <!--  <div class="item-box w-1/4 h-full mx-2-->
  <!--  rounded-lg transition shadow-->
  <!--  ease-in-out  hover:scale-105" :style="item.bgc3">-->
  <div class="item-box w-1/4 h-full mx-2
  rounded-lg transition shadow bg-white
  ease-in-out  hover:scale-105">
    <div class="w-full h-full flex items-center justify-between">
      <template v-if="item.type !== 'one'">
        <div class="w-2 h-full rounded-l-lg" :style="item.bgc2"></div>
        <!--      <div class="w-2 h-full rounded-2xl" ></div>-->
        <div class="w-6/12 " :style="{ color: item.color }">
          <span class="font-sans font-bold text-slate-700">{{ item.title }}</span>
          <div class="font-bold text-3xl mt-1.5 ordinal slashed-zero tabular-nums">{{ item.number }} <span
              class="text-xl">{{ item.unit }}</span></div>

        </div>
        <div class="w-4/12 h-full flex justify-center items-center">
          <!--        <div class="rounded-box flex justify-center items-center" :style="item.bgc">-->
          <div class="rounded-box flex justify-center items-center" :style="item.bgc3">
            <i :class="['iconfont', item.iconfont]" :style="{ fontSize: '36px', color: item.color }" />
          </div>
        </div>
      </template>
      <template v-else>
        <div class="w-2 h-full rounded-l-lg" :style="item.bgc2"></div>
        <div class="w-full h-full relative bg-white rounded-lg px-4 py-2 shadow-inner">
          <div class="flex items-center  box-card " style="border-bottom: 1px solid;border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));">
            <el-icon class="mr-1 text-blue-500"><Histogram /></el-icon>
            <div class="text-gray-600 font-medium text-base">{{ item.title }}</div>
          </div>
          <v-chart ref="barChartRef" class="w-full h-full" />
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import '@/assets/font/iconfont.css'
import { defineProps, onMounted, ref, nextTick, watch } from 'vue'
import { Histogram } from '@element-plus/icons-vue'

const props = defineProps({
  item: {
    type: Object,
    required: true
  },
})

const barChartRef = ref()

const renderBarChart = () => {
  if (!barChartRef.value || !props.item.number) return

  // 统一的配置数组
  const chartConfig = {
    colors: [
      { start: '#1890ff', end: '#39c8ff' }, // 蓝色
      { start: '#36cfc9', end: '#5cdbd3' }, // 青色
      { start: '#73d13d', end: '#95de64' }, // 绿色
      { start: '#ffc53d', end: '#ffd666' }, // 黄色
      { start: '#ff7a45', end: '#ff9c6e' }, // 橙色
      { start: '#ff4d4f', end: '#ff7875' }  // 红色
    ],
    defaultColor: { start: '#ff7a45', end: '#ff9c6e' }, // 默认使用橙色
    grid: {
      left: '5%',
      right: '20%',
      bottom: '5%',
      top: '0%',
      containLabel: true,
    },
    barStyle: {
      width: '40%',
      radius: [0, 15, 15, 0]
    },
    font: {
      color: '#1890ff',
      size: 14,
      labelSize: 12
    }
  }

  const data = props.item.number
  const xAxisData = data.map(item => item.unit)
  const seriesData = data.map((item, index) => {
    const colorPair = index < chartConfig.colors.length
      ? chartConfig.colors[index]
      : chartConfig.defaultColor

    return {
      value: item.qty,
      itemStyle: {
        color: new Function('return ' + `{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [{
            offset: 0,
            color: '${colorPair.start}'
          }, {
            offset: 1,
            color: '${colorPair.end}'
          }]
        }`)()
      }
    }
  })

  const option = {
    backgroundColor: 'transparent',
    grid: chartConfig.grid,
    xAxis: {
      type: 'value',
      show: false
    },
    yAxis: {
      type: 'category',
      data: xAxisData,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        color: function(value, index) {
          const colorPair = index < chartConfig.colors.length
            ? chartConfig.colors[index]
            : chartConfig.defaultColor
          return colorPair.start
        },
        fontSize: chartConfig.font.size,
        interval: 0,
        margin: 20
      }
    },
    series: [{
      data: seriesData,
      type: 'bar',
      barWidth: chartConfig.barStyle.width,
      itemStyle: {
        borderRadius: chartConfig.barStyle.radius
      },
      label: {
        show: true,
        position: 'right',
        color: '#000',
        fontSize: chartConfig.font.labelSize,
        backgroundColor: 'rgba(0,0,0,0.05)',
        padding: [4, 8],
        borderRadius: 4,
        formatter: function (params) {
          return params.value
        }
      }
    }]
  }

  barChartRef.value.setOption(option)
}

watch(() => props.item.number, () => {
  nextTick(() => {
    renderBarChart()
  })
}, { deep: true })

onMounted(() => {
  nextTick(() => {
    renderBarChart()
  })
})
</script>

<style scoped lang="scss">
.rounded-box {
  width: 58px;
  height: 58px;
  border-radius: 50%;
}

.chart-container {
  :deep(.echarts) {
    width: 100% !important;
    height: 100% !important;
  }
}
</style>
